<!--
 * @Description: 选择框组件
-->
<template>
  <div class="cpt_grey_disabled" v-if="disabled">{{
    Array.isArray(value)
      ? value
          .map(i => {
            return i[prop['label']]
          })
          .join('，')
      : value[label_p]
  }}</div>
  <el-select
    v-else
    class="_ehl_select"
    :value="value"
    @change="valChange"
    @visible-change="visibleChange"
    @clear="clearClick"
    :filter-method="remoteMethod"
    :placeholder="placeholder"
    :loading="loading"
    :loading-text="loadingtext"
    :disabled="disabled"
    :filterable="filterable"
    :multiple="multiple"
    :clearable="clearable2"
    :allow-create="allowCreate"
    :default-first-option="defaultFirstOption"
    :value-key="value_p"
  >
    <el-option
      v-for="item in options"
      :key="
        typeof item[value_p] == 'string' ? item[value_p] : JSON.stringify(item[value_p])
      "
      :label="item[label_p]"
      :value="item"
      :disabled="item.disabled"
    >
    </el-option>
  </el-select>
</template>
<script>
  import Vue from 'vue'
  import { Select, Option } from 'element-ui'
  Vue.use(Select)
  Vue.use(Option)
  export default {
    props: {
      value: { type: [Object, Array], required: true, default: () => {} },
      options: { type: Array, required: true, default: () => [] },
      //懒加载，false=创建时加载，true=下拉框出现时加载
      lazy: { type: Boolean, default: () => false },
      //显示清空按钮
      clearable: { type: Boolean, default: () => false },
      //是否启用多选
      multiple: { type: Boolean, default: () => false },
      //是否不可编辑
      disabled: { type: Boolean, default: () => false },
      //是否启动搜索,启动后默认为lazy状态
      filterable: { type: Boolean, default: () => false },
      //是否允许输入创建,filterable必须为true
      allowCreate: { type: Boolean, default: () => false },
      //输入创建按回车直接进入第一选项,allowCreate必须为true,filterable必须为true
      defaultFirstOption: { type: Boolean, default: () => false },
      //提示性文字
      placeholder: { type: String, default: () => '请选择' },
      loadingtext: { type: String, default: () => '加载中...' },
      //value的key映射
      prop: { type: Object, default: () => ({ label: 'label', value: 'value' }) },
    },
    data() {
      return {
        clearable2: false,
        loading: false,
        label_p: this.prop['label'],
        value_p: this.prop['value'],
      }
    },
    watch: {
      value(val, old) {
        this.clearable2 = Boolean(
          this.clearable && val[this.label_p] && val[this.value_p],
        )
      },
      options(val, old) {
        this.loading = false
      },
    },
    created() {
      this.addValueToOptions()
      !(this.filterable || this.lazy) &&
        !this.disabled &&
        this.$emit('init', this.options)
    },
    methods: {
      addValueToOptions() {
        let tmp = null
        if (Array.isArray(this.value)) {
          tmp = this.value
        } else {
          tmp = [this.value]
        }
        tmp.forEach(i => {
          if (!this.options.contain(i) && this.value[this.label_p]) {
            this.options.push(this.value)
          }
        })
      },
      valChange(val) {
        if (this.multiple) {
          this.$emit('input', val)
          this.$emit('change', val)
        } else {
          this.$emit('input', val)
          this.$emit('change', val)
        }
      },
      visibleChange(val) {
        if ((this.filterable || this.lazy) && val && !this.disabled) {
          this.loading = true
          this.$emit('init', this.options)
        }
      },
      clearClick() {
        if (this.multiple) {
          this.$emit('input', [])
          this.$emit('change', [])
          this.$emit('clear', [])
        } else {
          this.$emit('input', {})
          this.$emit('change', {})
          this.$emit('clear', {})
        }
      },
      remoteMethod(val) {
        this.$emit('init', this.options, val)
      },
    },
  }
</script>
